<template>
  <div class="bottom_content">
    <!-- 内容区域 -->
    <div class="content_wrapper">
      <!-- 二级内容显示昵称 -->
      <slot name="header"></slot>
      <span v-html="item.json.msg" style="line-height:1.8"></span>
    </div>
    <!-- 资源区域 -->
    <div class="source_wrapper" v-if="item.json.song || item.json.album">
      <div class="lf_music cursor_class">
        <img :src="item.json.song ? item.json.song.album.picUrl : item.json.album.picUrl" alt=""
          @click="item.json.song ? router.push('/discover/song/' + item.json.song.id) : router.push('/discover/album-detail/' + item.json.album.id)">
        <span class="icon_play">
          <el-icon @click.stop="play(item.json.song.id)">
            <VideoPlay />
          </el-icon>
        </span>
      </div>
      <div class="rt_info">
        <div class="top_music_name">
          <el-tag v-if="item.json.album">专辑</el-tag>
          <span class="cursor_class text_decoration"
            @click="item.json.song ? router.push('/discover/song/' + item.json.song.id) : router.push('/discover/album-detail/' + item.json.album.id)">
            {{ item.json.song ? item.json.song.name : item.json.album.name }}
          </span>
        </div>
        <div class="bottom_music_singer">
          <!-- 一首歌可能有多个歌手 -->
          <span v-for="(el, i) in (item.json.song ? item.json.song.artists : item.json.album.artists)" :key="i">
            <span v-if="i !== 0"> / </span>
            <span class="cursor_class text_decoration" @click="router.push('/discover/artist-detail/' + el.id)">
              {{ el.name }}
            </span>
          </span>
        </div>
      </div>
    </div>
    <!-- 图片区域 这里建议找插件 不同图片数量应该不同的显示方式参考朋友圈-->
    <div class="image_wrapper" v-if="item.type === 35 || item.type === 19">
      <el-image v-for="(el, i) in item.pics" :src="el.originUrl + '?param=0x338&quality=100'"
        :preview-src-list="item.pics.map(ele => ele.originUrl)" :initial-index="i" fit="cover" />
    </div>
    <!-- resource -->
    <div class="resource_wrapper" v-if="item.json.resource">
      <div class="resource_one" v-if="item.type === 56">
        <img :src="item.json.resource.coverImgUrl" @click="open(item.json.resource.webviewUrl)" />
        <el-link type="info" :href="item.json.resource.webviewUrl" target="_blank">{{ item.json.resource.title }}</el-link>
      </div>
      <div class="resource_two" v-if="item.type === 31">
        <div>
          <el-link style="vertical-align: baseline;" type="primary" :href="'/user-home/' + item.json.resource.user.userId">@{{ item.json.resource.user.nickname }}</el-link>
          <span>：{{ item.json.resource.content }}</span>
        </div>
        <div style="margin-top:10px" v-for="(el,i) in item.json.resource.beReplied" :key="i">
          <el-link style="vertical-align: baseline;" type="primary" :href="'/user-home/' + el.user.userId">@{{ el.user.nickname }}</el-link>
          <span>：{{ el.content }}</span>
        </div>
        <div class="resource_name">{{ item.json.resource.resourceName }}</div>
      </div>
    </div>
    <slot name="event"></slot>
    <div class="esb_wrapper">
      <div class="esb">
        <el-button :icon="Pointer" link :type="item.info.liked ? 'danger' : 'primary'" @click="likeClick(item.info.threadId)"></el-button>
        <span class="cursor_class" @click="likeClick(item.info.threadId)">({{ item.info.likedCount }})</span>
      </div>
      <span style="margin:0 10px;color:#999">|</span>
      <el-button link type="primary" @click="commentClick">评论 ({{ item.info.commentCount }})</el-button>
    </div>
    <!-- !!!!!!!!!!!!!!!!!!!!!!评论区 点击评论才显示 默认不要显示-->
    <div class="cmt_box" v-if="item.commentVisible">
      <CommentComponent :id="item.info.threadId" :commentType="1" :playlistLimit="page.pageSize" :isActiveId="false" :pageNum="page.pageNum" @getTotal="getTotal"></CommentComponent>
      <div class="pageination_center" style="margin-top:40px">
        <el-pagination v-show="page.total > 0" v-model:currentPage="page.pageNum" :page-size="page.pageSize" background
          layout="prev, pager, next" :total="page.total" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import CommentComponent from "@/components/Comment/index"
import * as friendApi from '@/api/friend'
import { ref, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { VideoPlay, Pointer } from '@element-plus/icons-vue'
import { checkMusic } from '@/api/my-music'
import { useStore } from "vuex";
import { ElMessage } from "element-plus"
import { getSongDetail} from "@/api/song";

const store = useStore();
const router = useRouter()
const props = defineProps({
  item: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const { item }:any = toRefs(props)
const page =  reactive({
  total: 0, // 总页数
  pageNum: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})
// 点赞
const likeClick = async (threadId: string) => {
  try {
    let cookie = localStorage.getItem('cookie')
    await friendApi.like({ type: 6, threadId, cookie, t: item.value.info.liked ? 0 : 1 })
    if(item.value.info.liked){
      item.value.info.likedCount--
    } else {
      item.value.info.likedCount++
    }
    item.value.info.liked = !item.value.info.liked
  } catch (error) {
    console.log(error);
  }
}
// 评论显示隐藏
const commentClick = () => {
  item.value.commentVisible = !item.value.commentVisible
}
// 获取最新评论总数量
const getTotal = (val: number) => {
  page.total = val
}
// 初始化
const init = () => {
  // 匹配# #
  if(item.value.actName) {
    item.value.json.msg = item.value.json.msg.replaceAll(`#${item.value.actName}#`, `<a class='text_decoration primay' target='_blank' href='${item.value.bottomActivityInfos ? item.value.bottomActivityInfos[0].h5Target : ''}'>#${item.value.actName}#</a>`)
  }
  // 匹配@
  if(item.value.type === 31) {
    // 匹配歌手
    item.value.json.msg = item.value.json.msg.replaceAll(`@${item.value.json.resource.user.nickname}`, `<a class='text_decoration primay' target='_blank' href='/user-home/${item.value.json.resource.user.userId}'>@${item.value.json.resource.user.nickname}</a>`)
    item.value.json.resource.beReplied.forEach((el:any) =>{
      // 匹配被回复歌手
      item.value.json.msg = item.value.json.msg.replaceAll(`@${el.user.nickname}`, `<a class='text_decoration primay' target='_blank' href='/user-home/${el.user.userId}'>@${el.user.nickname}</a>`)
    })
  }
}
init()
// 歌曲播放
const play = (id:any)=>{
  getSongDetailData(id)
}
// 检测音乐是否可用
const checkMusicData = async (row: any) => {
  const res: any = await checkMusic({
    id: row.id
  })
  if (res.success) {
    store.dispatch('selectPlay', { list: [row] });
  } else {
    ElMessage({
      message: res.message || '当前音乐不可用',
      type: 'error',
    })
  }
}
// 获取歌曲详情信息
const getSongDetailData = async (id:any) => {
  const res: any = await getSongDetail({
    ids: id
  })
  checkMusicData(res.songs[0])
}
</script>
<style lang="scss" scoped>
.bottom_content {
  .content_wrapper {
    color: #333;
    font-size: 14px;
    margin: 14px 0 10px;
  }

  .source_wrapper {
    background: #f5f5f5;
    padding: 10px;
    display: flex;
    margin-bottom: 14px;

    .lf_music {
      width: 40px;
      height: 40px;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .icon_play {
        color: #fff;
        font-size: 28px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .rt_info {
      padding-left: 10px;
      font-size: 14px;

      .top_music_name {
        color: #333;
      }

      .bottom_music_singer {
        font-size: 12px;
        color: #999;
        margin-top: 10px;
      }
    }
  }

  .image_wrapper {}

  .resource_wrapper {
    background: #f0eded;
    padding: 5px 10px 10px 10px;
    .resource_one {
      display: flex;
      align-items: center;
      font-size: 14px;
      img {
        width: 40px;
        height: 40px;
        object-fit: cover;
        margin-right: 10px;
      }
    }
    .resource_two {
      font-size: 14px;
      .resource_name {
        font-size: 12px;
        color: #999;
        margin-top: 14px;
      }
    }
  }

  .esb_wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 14px;

    .esb {
      display: flex;
      align-items: center;

      span {
        margin-left: 4px;
        color: #409eff;
        font-size: 14px;
      }
    }
  }

  .cmt_box {
    margin-top: 14px;
    .cmt_view_more {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #666;
      font-size: 13px;
    }
  }
}
</style>
